import React from 'react'
import Image from 'next/image'
import { assets } from '../../../assets/assets'
import { motion } from 'motion/react'
function Header() {
  return (
    <div className="w-11/12 max-w-3xl text-center mx-auto h-screen flex flex-col items-center justify-center gap-4">
      <motion.div
        initial={{ scale: 0 }}
        whileInView={{ scale: 1 }}
        transition={{ duration: 0.8, type: 'spring', stiffness: 100 }}
      >
        <Image
          src={assets.profile}
          alt=""
          className="rounded-full w-32 mx-auto"
        ></Image>
      </motion.div>
      <motion.h3
        initial={{ y: -20, opacity: 0 }}
        whileInView={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.6, delay: 0.3 }}
        className="flex items-end justify-center gap-2 text-xl md:text-2xl mb-3"
      >
        你好！我是高
        <Image src={assets.hand} alt="" className="rounded-full w-6"></Image>
      </motion.h3>
      <motion.h1
        initial={{ y: -30, opacity: 0 }}
        whileInView={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.8, delay: 0.5 }}
        className="text-3xl sm:text-6xl lg:text-[66px] "
      >
        {' '}
        frontent web developer based in Beijing
      </motion.h1>
      <motion.p
        initial={{ opacity: 0 }}
        whileInView={{ opacity: 1 }}
        transition={{ duration: 0.6, delay: 0.7 }}
        className="max-w-2xl mx-auto "
      >
        i am a frontend developer from China
      </motion.p>
      <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mt-4">
        <a
          initial={{ y: 30, opacity: 0 }}
          whileInView={{ y: 0, opacity: 1 }}
          transition={{ duration: 0.6, delay: 1 }}
          href="concat"
          className="px-10 py-3 border border-white rounded-full bg-black text-white flex items-center gap-2 dark:bg-transparent"
        >
          concant me
          <Image src={assets.arrowWhite} alt="" className="w-4"></Image>
        </a>
        <motion.a
          initial={{ y: 30, opacity: 0 }}
          whileInView={{ y: 0, opacity: 1 }}
          transition={{ duration: 0.6, delay: 1.2 }}
          href="/高俊波-前端开发工程师-3年.pdf"
          download
          className="px-10 py-3 border rounded-full border-gary-500 flex items-center gap-2 bg-white dark:text-black dark"
        >
          my resume
          <Image src={assets.download} alt="" className="w-4"></Image>
        </motion.a>
      </div>
    </div>
  )
}

export default Header
